<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>学习</title>
</head>

<body>
  <canvas id="c2d" class="c2d" width="1000" height="500"></canvas>
  <script type="module">
    // 官网地址
    import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js'
    const canvas = document.querySelector('#c2d')
    // 渲染器
    const renderer = new THREE.WebGLRenderer({ canvas })
    renderer.setClearColor(0xeeeeee, 0.5)

    const fov = 40 // 视野范围
    const aspect = 2 // 相机默认值 画布的宽高比
    const near = 0.1 // 近平面
    const far = 1000 // 远平面
    // 透视投影相机
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)

    // 相机位置 正下方向下看
    camera.position.set(0, 50, 0) // 相机位置
    camera.up.set(0, 0, 1)
    camera.lookAt(0, 0, 0) // 相机朝向

    // 创建场景
    const scene = new THREE.Scene()

    {
      const color = 0xeeeeee
      const intensity = 1
      // 创建光源
      const light = new THREE.DirectionalLight(color, intensity)
      // 光源 加入场地
      scene.add(light)
    }

    // 立体几何
    const boxWidth = 6
    const boxHeight = 6
    const boxDepth = 6
    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth)

    const loader = new THREE.TextureLoader()
    const texture = loader.load('https://wow.techbrood.com/uploads/1702/crate.jpg')

    // 基础材质
    const material = new THREE.MeshBasicMaterial({
      map: texture
    })
    // 网格
    const mesh = new THREE.Mesh(geometry, material)
    // 相对坐标 x 移动5
    mesh.position.x = 5
    scene.add(mesh)

    const mesh2 = new THREE.Mesh(geometry, material)
    // 相对坐标 z 移动-10
    mesh2.position.z = -10
    scene.add(mesh2)

    const group=new THREE.Group()
    group.add(mesh)
    group.add(mesh2)

    // 全局坐标x 移动10
    group.position.x= 1

    scene.add(group)

    function render(time) {
      time *= 0.001

      // 旋转 组
      // group.rotation.y = time
      // group.rotation.x = time

      // 加载渲染器
      renderer.render(scene, camera)

      // 开始动画
      requestAnimationFrame(render)

    }
    // 开始渲染
    requestAnimationFrame(render)
  </script>
</body>

</html>